import React from 'react'
import { useLocation,useParams } from 'react-router-dom'
import qs from "qs"

export default function List() {
  /* 
    useParams:
      -可以接收当前路由地址接收的params传参,用对象表示

      相当于以前的path传参(路由参数传参),先在父组件写参数,再在路由中配置,在子组件中用useParams()接收参数
  */

      const {id}=useParams()
      console.log(useParams())//这是id对象

  const uselocation=useLocation()
  const {a,b}=qs.parse(uselocation.search.split("?")[1])
  const state=uselocation.state
  // uselocation.state  这个值是数组 牢记 要拿值要把每一项都遍历出来
  return (
    <div>
      <h1>{id}</h1>
      <p>{a} {b}</p>
      {
        state.map(item=>{
          return <li key={item.id}>{item.name}</li>
        })
      }
    
    </div>
  )
}
